<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="css/me.css">
</head>
<body>
    <!--导航-->
    <nav class="ui inverted attached segment m-padded-tb-mini">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">Blog</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="small home icon"></i>首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="small clone icon"></i>归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="small info icon"></i>关于我</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui icon  inverted   input">
                        <input type="text" name="" id="" placeholder="Search...">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon  button m-top-right m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>
 
    <!--中间内容-->
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container">
            <div class="ui top attached segment">
                <div class="ui horizontal link list">
                    <div class="item">
                        <img src="https://unsplash.it/100/100?image=1014" alt="" class="ui avatar image" >
                        <div class="content">
                            <a href="" class="header">徐胜鑫</a>
                        </div>
                    </div>
                        <div class="item">
                           <i class="calender icon"></i>2017-10-01 
                        </div>
                        <div class="item">
                            <i class="eye icon"></i>2342 
                         </div>
                </div>
            </div>
            <div class="ui attached segment">
               <!--图片区域-->
               <img src="https://unsplash.it/800/450?image=1014" alt="" class="ui fluid rounded image">
            </div>
            <div class="ui attached padded segment">
                <!--内容-->
                <div class="ui right aligned basic segment">
                    <div class="ui orange label">原创</div>
                </div>
                <h2 class="ui center aligned header">关于刻意练习的清单</h2>
                <br>
                <div id="content" class="m-padded-lr-responsive">
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;心有明灯，便不会迷路，便可拒绝黑暗、胆怯，拥有一份明朗的心情，一份必胜的信念，一份坦荡的胸怀……心有小窗，便有亮丽的阳光进来，小酌一些温暖的故事，便有自由清风邀约一些花香或者白云。心有琴弦，纵然客去茶凉，仍有小曲缓缓响起，仍有满树桂花知音而化为酒香。</p>
                    <br>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;心有栅栏，然后青藤爬过，那些小秘密点缀其中，像叶片下小憩的蝴蝶，做梦一般，只能用花粉形容。心有玉阶，满阶是香囊佩瑶，满阶是锦言妙计，还有玲珑小贝和神秘念珠。于是孤独不再降临，花瓶不再寂寞。心有圣殿，供奉着高贵，尊严、善良、理想和追求……这都是些美丽的神灵。由此，而不可侵犯；由此，而拥有世界和自己.</p>
                </div>
                <!--标签-->
                <div class="m-padded-lr">
                    <div class="ui basic teal left pointing label">犯法</div>
                </div>
                <!--赞赏-->
                <div class="ui center aligned basic segment">
                    <button id="payButton" class="ui orange basic circular button">赞赏</button>
                </div>
                <div class="ui payQ flowing popup  transition hidden">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size: inherit !important;">
                            <div class="image">
                                <img src="./imgs/wechat1.jpg" alt="" class="ui rounded bordered image"style="width:120px">
                                <div>支付宝支付</div>
                            </div>
                            <div class="image">
                                <img src="./imgs/wechat1.jpg" alt="" class="ui rounded bordered image"style="width:120px">
                                <div>微信</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui  attached positive message">
                <!--博客信息-->
                <div class="ui  middle grid">
                    <div class="eleven wide column">
                        <div class="list">
                            <ul class="list">
                                <li>作者:徐胜鑫(联系作者)</li>
                                <li>发表时间:2021-4.28 8:57</li>
                                <li>版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)</li>
                                <li>公众号转载:请在文末添作者公众号二维码</li>
                            </ul>
                        </div>
                    </div>
                    <div class="five wide column">
                        <img src="./imgs/wechat1.jpg" alt="" class="ui right floated rounded bordered image" style="width: 110px;">
                    </div>
                </div>
            </div>
            <div class="ui bottom attached segment">
            <!--留言区域列表-->
            <div class="ui teal segment">
                <div class="ui small comments">
                    <h3 class="ui dividing header">Comments</h3>
                    <div class="comment">
                      <a class="avatar">
                        <img src="https://unsplash.it/100/100?image=1006">
                      </a>
                      <div class="content">
                        <a class="author">Matt</a>
                        <div class="metadata">
                          <span class="date">Today at 5:42PM</span>
                        </div>
                        <div class="text">
                          How artistic!
                        </div>
                        <div class="actions">
                          <a class="reply">回复</a>
                        </div>
                      </div>
                    </div>
                    <div class="comment">
                      <a class="avatar">
                        <img src="https://unsplash.it/100/100?image=1011">
                      </a>
                      <div class="content">
                        <a class="author">Elliot Fu</a>
                        <div class="metadata">
                          <span class="date">Yesterday at 12:30AM</span>
                        </div>
                        <div class="text">
                          <p>This has been very useful for my research. Thanks as well!</p>
                        </div>
                        <div class="actions">
                          <a class="reply">回复</a>
                        </div>
                      </div>
                      <div class="comments">
                        <div class="comment">
                          <a class="avatar">
                            <img src="https://unsplash.it/100/100?image=1025">
                          </a>
                          <div class="content">
                            <a class="author">Jenny Hess</a>
                            <div class="metadata">
                              <span class="date">Just now</span>
                            </div>
                            <div class="text">
                              Elliot you are always so right :)
                            </div>
                            <div class="actions">
                              <a class="reply">回复</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="comment">
                      <a class="avatar">
                        <img src="https://unsplash.it/100/100?image=1013">
                      </a>
                      <div class="content">
                        <a class="author">Joe Henderson</a>
                        <div class="metadata">
                          <span class="date">5 days ago</span>
                        </div>
                        <div class="text">
                          Dude, this is awesome. Thanks so much
                        </div>
                        <div class="actions">
                          <a class="reply">回复</a>
                        </div>
                      </div>
                    </div>
                  </div>
            </div>
            <div class="ui form">
                <div class="field">
                    <textarea name="content" id="" cols="30" rows="10" placeholder="请输入评论信息.."></textarea>
                </div>
                <div class="fields">
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="nickname" placeholder="姓名">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input type="text" name="email" placeholder="邮箱">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <button class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
                    </div>
                </div>
            </div>
            </div>

        </div>
    </div>
    <!--底部footer-->
    <footer class="ui inverted vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="./imgs/wechat1.jpg" class="ui rounded image"alt="" style="width:100px;height: 100px;">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced m-text-lined ">最新博客 </h4>
                    <div class="ui inverted link list">
                        <a href="" class="item">用户故事</a>
                        <a href="" class="item">用户故事</a>
                        <a href="" class="item">用户故事</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced m-text-lined ">联系我 </h4>
                    <div class="ui inverted link list">
                        <a href="" class="item">Email:877462690@qq.com</a>
                        <a href="" class="item">QQ:87746260</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header">xsx </h4>
                    <p class="m-text-thin m-text-spaced m-text-lined m-opacity-mini">niahdasdddddddddddddddddddddddddddddddddddddddddddddd</p>
                </div>
        </div>
        <div class="ui inverted section divider"></div>
           <p class="m-text-thin m-text-spaced m-text-lined m-opacity-small">Copyright 2020-2021 xsx Designed by xsx</p>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script>
        $('.menu.toggle').click(function(){
            $('.m-item').toggleClass('m-mobile-hide');
        });
        $('#payButton').popup({
            popup:$('.payQ.popup'),
            on:'click',
            postion:'bottom center'
        })
    </script>
</body>
</html>